<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>响应式原理</title>
	<link rel="stylesheet" href="">
</head>
<body>
	
</body>
<script>
	
	/* 目标

		1. 解决007中存在的问题，中间变量的全局暴露问题。

		2. 解决思路:
			标包函数的进一步封装
	*/


	let data = {
		name: '李白',
		age: 23
	}


	function defineResponse(obj, key, value, enumerable) {
		Object.defineProperty(obj, key, {
			enumerable: enumerable == undefined ? true : !!enumerable,
			get: ()=>{
				return `获取到了${key}的值：${value}`;
			},
			set: (newValue)=>{
				value = newValue;
				console.log(`设置${key}的值为${value}`);
			}
		})
	}


	// 完美解决中间变量全局暴露的问题
	defineResponse(data, 'name', '李白');


	// 扩展将所有的属性都转换为响应式
	let keys = Object.keys(data);
	for(let i = 0; i < keys.length; i++) {
		defineResponse(data, keys[i], data[keys[i]]);
	}


	/* 总结

		1. 存在的问题
			-1 如果data是一个具有深度的复杂模型该怎么办
			-2 如果data中含有数组，该数组中的元素是否是响应式
			-3 如果数组中含有对象元素又该怎么办
	*/ 


</script>
</html>